<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-21 16:34:04
 * @LastEditTime: 2024-03-18 15:29:48
 * @FilePath: \env-manager-pc\src\views\data_query\ent_day_power\ent.day.detail.vue
-->
<script setup lang="ts">
import dayjs from 'dayjs'
import lineChart from './components/lineChart.vue'
import dataQueryApi from '@/api/modules/data.query'
import useKeepAliveStore from '@/store/modules/keepAlive'

const keepAliveStore = useKeepAliveStore()

onBeforeRouteLeave((to) => {
  if (to.name !== 'data-ent-day-power-list') {
    keepAliveStore.remove('DataEntDayPowerList')
  }
})
// const entStore = useEntStore()

const cwRef = ref()
const entData = reactive(sessionStorage.getItem('ent_power') ? JSON.parse(sessionStorage.getItem('ent_power') as string) : {},
)
const route = useRoute()
const entID = route.params.id as string
// const type = route.query.type as DeviceType
const loading = ref(false)
const tableData = ref([])

const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))

const startTime = ref<string>(route.query.startTime as string || dayjs().format('YYYYMMDD'))
const endTime = ref<string>(route.query.endTime as string || dayjs().format('YYYYMMDD'))

const searchTime = computed({
  set: (value) => {
    const [start, end] = value
    startTime.value = start
    endTime.value = end
  },
  get: () => {
    return [startTime.value, endTime.value]
  },
})
function changeTime(value: any) {
  currentTime.value = value
  getData()
}

async function getData() {
  loading.value = true
  const res = await dataQueryApi.GetEnterpriseElecEveryday({
    objFilter: {
      Type: 'DIM.Units.Filters.GUIDFilter',
      Value: [
        entID,
      ],
    },
    pageSize: 1,
    pageNum: 1,
    startTime: startTime.value,
    endTime: dayjs(endTime.value).add(1, 'day').format('YYYYMMDD'),
  })
  loading.value = false
  const { Rows, Dates } = res as any
  tableData.value = Dates.map((time: string, index: number) => {
    return [Rows[0].Electricitys[index], time]
  })
  nextTick(() => {
    cwRef.value.refresh()
  })
}

getData()
</script>

<template>
  <PageMain>
    <div class="flex">
      <div class="flex-grow-1 overflow-x-hidden">
        <div>
          <ElDatePicker v-model="searchTime" type="daterange" value-format="YYYYMMDD" placeholder="选择日期" :clearable="false" @change="changeTime" />
          <el-tag v-if="entData.EntName" class="ml-10px" size="large" type="primary">
            企业：{{ entData.EntName }}
          </el-tag>
        </div>
        <div class="mt-10px">
          <lineChart
            ref="cwRef"
            v-loading="loading"
            :table-data="tableData"
          />
        </div>
      </div>
    </div>
  </PageMain>
</template>
